<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { useUpdateUserInfoService } from '@/api/user'
const { userinfo, getUserInfoService } = useUserStore()
const formRef = ref()
const userInfo = ref(userinfo)
const rules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{2,10}$/,
      message: '昵称只能包含中文、字母和数字',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: '请输入正确的邮箱地址',
      trigger: 'blur'
    }
  ]
}

const submitForm = async () => {
  await formRef.value.validate()
  await useUpdateUserInfoService(userInfo.value)
  getUserInfoService()
}
</script>
<template>
  <div class="main1">
    <page-container title="基本资料">
      <el-form
        label-width="80px"
        class="user-profile"
        :model="userInfo"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="用户名">
          <el-input disabled v-model="userInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="userInfo.nickname"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userInfo.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="submitting">
            提交修改
          </el-button>
        </el-form-item>
      </el-form>
    </page-container>
  </div>
</template>
